<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
  />
  <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
  <title>Title</title>
  <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
      integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"
      crossorigin="anonymous"
  />

  <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
  <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
      integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ"
      crossorigin="anonymous"
  />
  <script src="./config.js"></script>
</head>
<body>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">名: </span>
  <input
      type="text"
      class="form-control"
      placeholder="本名"
      aria-describedby="basic-addon1"
      id="name"
  />
</div>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">号: </span>
  <input
      type="text"
      class="form-control"
      placeholder="本名"
      aria-describedby="basic-addon1"
      id="code"
  />
</div>
<p style="display: flex; justify-content: center">
  <button onclick="add()" class="btn btn-default">搜索</button>
</p>
<div id="json"></div>
<script>
  const name = document.getElementById("name");
  const code = document.getElementById("code");
  const json = document.getElementById("json");
  let arr = JSON.parse(localStorage.getItem("ben"));
  window.addEventListener("keydown", function (e) {
    if (e.key.toLowerCase == "enter") {
      add();
    }
  });
  code.addEventListener("keydown", function (e) {
    if (e.key.toLowerCase == "enter") {
      console.log(1);
      add();
    }
  });

  function add() {
    var n = name.value;
    var c = code.value;
    var a = arr.filter((item) => {
      return item.code.include(c);
    });
    if (!a.length) {
      arr.push({
        name: n,
        code: c,
      });
      json.innerHTML = JSON.stringify(arr);
      localStorage.setItem('ben', JSON.stringify(arr))
    }
    name.value = "";
    code.value = "";
    name.focus();
  }
</script>
</body>
</html>
